<template>
  <el-dialog
    title="添加角色"
    :visible="showDialog"
    :close-on-click-modal="false"
    @close="clearForm"
  >
    <!--    放置弹层内容-->
    <el-form ref="formData" :model="formData" :rules="rules" label-width="120px">
      <el-form-item prop="name" label="角色名称">
        <el-input v-model="formData.name" placeholder="2-10个字符" style="width: 80%" size="mini" />
      </el-form-item>
      <el-form-item prop="state" label="角色启用状态">
        <input v-model="formData.state" class="togglesw" type="checkbox">
      </el-form-item>
      <el-form-item prop="description" label="角色介绍">
        <el-input
          v-model="formData.description"
          placeholder="2-100个字符"
          type="textarea"
          size="mini"
          :rows="4"
          style="width: 80%"
        />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button size="mini" type="primary" @click="subFormData">确定</el-button>
            <el-button size="mini" @click="clearForm">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
import { addRole } from '@/api/role'

export default {
  name: 'RoleDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        name: '',
        state: 0,
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '角色名称2-10个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' },
          { min: 2, max: 100, message: '角色描述2-100个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    clearForm() {
      this.$refs.formData.resetFields()
      this.$emit('update:showDialog', false)
    },
    subFormData() {
      this.$refs.formData.validate(async(valid) => {
        if (valid) {
          await addRole(this.formData)
          this.clearForm()
          this.$nextTick(() => {
            this.$emit('updateRole')
            this.$notify({
              title: '添加角色成功',
              message: this.formData.name + ' 角色添加成功',
              type: 'success'
            })
          })
        } else {
          this.$notify({
            title: '添加角色失败',
            message: '角色添加失败,请按照要求进行添加',
            type: 'error'
          })
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.togglesw {
  --s: 30px;
  /* adjust this to control the size*/
  height: calc(var(--s) + var(--s) / 5);
  width: auto;
  /* some browsers need this */
  aspect-ratio: 2.25;
  border-radius: var(--s);
  margin: calc(var(--s) / 2);
  display: grid;
  cursor: pointer;
  background-color: #ff7a7a;
  box-sizing: content-box;
  overflow: hidden;
  transition: .3s .1s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.togglesw:before {
  content: "";
  padding: calc(var(--s) / 10);
  --_g: radial-gradient(circle closest-side at calc(100% - var(--s) / 2) 50%, #000 96%, #0000);
  background: var(--_g) 0 /var(--_p,var(--s)) 100% no-repeat content-box,
  var(--_g) var(--_p,0)/var(--s) 100% no-repeat content-box,
  #fff;
  mix-blend-mode: darken;
  filter: blur(calc(var(--s) / 12)) contrast(11);
  transition: .4s, background-position .4s .1s,
  padding cubic-bezier(0, calc(var(--_i, -1) * 200), 1, calc(var(--_i, -1) * 200)) .25s .1s;
}

.togglesw:checked {
  background-color: #85ff7a;
}

.togglesw:checked:before {
  padding: calc(var(--s) / 10 + .05px) calc(var(--s) / 10);
  --_p: 100%;
  --_i: 1;
}

</style>
